<template>
  <view :class="'msg-page '+className">
    <view class="msg-pic">
      <b-image v-if="isConnected" :src="'/static/images/empty/' +type+ '.png'" :width="width" :height="height" mode="aspectFit" :is-asset="isAsset" />
      <b-image v-else :src="'/static/images/empty/empty_network.png'" :width="width" :height="height" mode="aspectFit" :is-asset="isAsset" />
      <b-image class-name="preload" :src="'/static/images/empty/empty_network.png'" :is-asset="isAsset" />
    </view>
    <template v-if="isConnected">
      <view v-if="text" class="msg-describe">{{ text }}</view>
    </template>
    <view v-else class="msg-describe">网络异常，请检查您的网络</view>
    <view v-if="btnText">
      <button class="msg-btn" @click="handleBtnClick">{{ btnText }}</button>
    </view>
  </view>
</template>
<script>
export default {
  name: 'MsgPage',
  props: {
    // strategy 无攻略  verification无核销  giftbag无礼蛋 goods无商品 coupon无优惠券
    // address 无地址   network无网络 order无订单  welfare无福利  search无搜索  dealings无往来
    type: {
      type: String,
      default: 'empty_network'
    },
    className: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    },
    btnText: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '240'
    },
    height: {
      type: String,
      default: '240'
    },
    isAsset: { // 是否使用网络静态图片
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isConnected: true
    }
  },
  created() {
    uni.getNetworkType({
      success: (res) => {
        this.isConnected = res.networkType !== 'none'
      }
    })
  },
  methods: {
    handleBtnClick() {
      this.$emit('btnClick')
    }
  }
}
</script>
<style lang="scss" scoped>
.msg-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  .preload{
    width: 0;
    height: 0;
    visibility: hidden;
  }
  .msg-pic {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .msg-describe {
    font-size:28rpx;
    color:#000;
    text-align: center;
    margin-top: 20rpx;
  }
  .msg-btn {
    @include empty-button-circle;
  }
}
</style>
